*{ margin: 0;
    padding: 0; 
    box-sizing: border-box; 
 }
 
 body{
     overflow-x: hidden;
 }
 header{
     width: 100%; height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
     position: relative;
 }
 .animated-area{
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background-color: rgb(228, 15, 15);
     overflow: hidden;
     z-index: -1;
 }
 .animated-area span{
     position: absolute;
     top:0;
     width: 2px; height: 200px;
     background-image: linear-gradient(to bottom,transparent,#fff);
     animation: shower 3s linear infinite;
 }
 @keyframes shower{
     from{ transform: translateY(-50%); }
     to{ transform: translateY(500%);}
 
 }
 .intro-content{
     position: absolute;
     top: 40%; 
     left: 50%;
     transform: translate(-50%,-50%);
     white-space: nowrap;
     text-align: center;
     color: #fff;
 }
 .intro-content .btn{
     display: inline-block;
     margin-top: 15px;
     background-color: rgba(0,0,0,0.3);
     padding: 10px 40px;
     border:2px solid #fff;
 }
 button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 25px;
 }